<template>
  <div class="page-index">
    <div class="body" :style="bodyStyle">
      <!-- 二级 -->
      <RouterView />
    </div>
    <div class="footer">
      <!-- 底部tabbar -->
      <van-tabbar route>
        <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/cart" icon="cart-o">购物车</van-tabbar-item>
        <van-tabbar-item to="/center" icon="friends-o">个人中心</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import { computed } from "vue";

const route = useRoute();
const bodyStyle = computed(() => {
  let style = {};
  if (route.name === "home") {
    style = {
      paddingBottom: "50px",
    };
  } else {
    style = { height: "calc(100% - 50px)" };
  }
  return style;
});
</script>

<style lang="scss" scoped>
.page-index {
  height: 100%;
}
</style>
